<template>
  <div class="home_mod" :class="themeClass">
    <div class="app_down" v-if="!isApp" @click="jumpRouter('/download')">
      APP
      <span class="app_down_btn">{{ $t('Mine.Download software') }}</span>
    </div>
    <div class="home_mod_tip">
      <v-nav :no_back="true" :title="titleName" v-if="isDayTime === false" title_color="#fff" :class="themeClass"></v-nav>
      <v-nav :no_back="true" :title="titleName" v-if="isDayTime === true"></v-nav>
    </div>
    <div class="home_mod_box">
      <div class="home_mod_box_desc">
        <div class="swiper">
          <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="(item, index) in bannerImgList" :key="index">
              <a :href="item.jump_address != '' ? item.jump_address : 'javascript:;'">
                <img :src="item.image" alt="" />
              </a>
            </van-swipe-item>
          </van-swipe>
        </div>
        <div class="notice" @click="jumpRouter('/home/notice')">
          <img src="@/assets/img/notice@2x.png" alt="" />
          <van-notice-bar v-if="isDayTime == false" mode="link" :class="themeClass" color="#fff">{{ notice }}</van-notice-bar>
          <van-notice-bar v-if="isDayTime == true" mode="link">{{ notice }}</van-notice-bar>
        </div>
      </div>
      <div class="home_mod_box_line" :class="themeClass1"></div>
      <div class="home_mod_box_content">
        <div class="help1">
          <!-- 隐藏 -->
          <!-- 合约 -->
          <div @click="jumpRouter('/trade', 'Fast')">
            <img src="@/assets/img/ganggan.png" alt="" />
            <p :class="bgColor">{{ $t('Home.Leverage') }}</p>
          </div>
          <!-- 贷款 -->
          <div @click="jumpRouter('/jiedai')">
            <img src="@/assets/img/c2c.png" alt="" />
            <p :class="bgColor">{{ $t('Home.loan') }}</p>
          </div>
          <!-- 现货 -->
          <div @click="jumpRouter('/trade', 'Currency')">
            <img src="@/assets/img/Trade2.png" alt="" />
            <p :class="bgColor">{{ $t('Home.Spot goods') }}</p>
          </div>
          <!-- 账单 -->
          <div @click="jumpRouter('/mine/transaction')">
            <img src="@/assets/img/record.png" alt="" />
            <p :class="bgColor">{{ $t('Home.bill') }}</p>
          </div>
        </div>
        <div class="help">
          <!-- 客服 -->
          <div @click="jumpRouter('/customerservice')">
            <img src="@/assets/img/kf.png" alt="" />
            <p :class="bgColor">{{ $t('Home.customer service') }}</p>
          </div>
          <!-- 兑换 -->
          <div @click="jumpRouter('/asset/exchange')">
            <img src="@/assets/img/Legal_currency.png" alt="" />
            <p :class="bgColor">{{ $t('Home.convert') }}</p>
          </div>
          <!-- 隐藏 -->
          <!-- 划转 -->
          <!-- <div @click="jumpRouter('/asset/Huazhuan')">
            <img src="@/assets/img/transfer.png" alt="" />
            <p :class="bgColor">{{ $t('Home.transfer') }}</p>
          </div> -->
          <!-- 语言 -->
          <div @click="jumpRouter('/lang')">
            <img src="@/assets/img/en.png" alt="" />
            <p :class="bgColor">{{ $t('Home.language') }}</p>
          </div>
        </div>
        <div class="transaction">
          <div @click="jumpRouter('/asset/deposit')">
            <p>{{ $t('Home.Quick recharge') }}</p>
            <span>{{ $t('Home.Enter') }}</span>
            <img src="@/assets/img/enter@2x(1).png" alt="" />
          </div>
          <div @click="jumpRouter('/trade', 'Contract')">
            <p>{{ $t('Home.options trading') }}</p>
            <span>{{ $t('Home.Enter') }}</span>
            <img src="@/assets/img/enter@2x.png" alt="" />
          </div>
        </div>

        <div class="spare_money" @click="jumpRouter('/home/lockup')">
          <img src="@/assets/img/sparemoney@2x.png" alt="" />
          <div>
            <span>{{ $t('Home.Make a lot of money with your money') }}</span>
            <br />
            <span>{{ $t('Home.Lock-up mining') }}</span>
          </div>
        </div>
        <div class="data">
          <van-tabs v-model="symbolType" type="card" @click="getHomeMarketData()" title-active-color="#fff" title-inactive-color="#daab51" color="#daab51">
            <van-tab :title="$t('Home.precious metals')" name="2"></van-tab>
            <van-tab :title="$t('Home.cryptocurrency')" name="1"></van-tab>
          </van-tabs>
          <van-tabs v-model="active" v-if="isDayTime == false" title-active-color="#fff" title-inactive-color="#fff" color="#fff" background="#191B27">
            <van-tab :title="$t('Home.Gainer list')"></van-tab>
            <van-tab :title="$t('Home.Volume')"></van-tab>
          </van-tabs>
          <van-tabs v-model="active" v-if="isDayTime == true">
            <van-tab :title="$t('Home.Gainer list')"></van-tab>
            <van-tab :title="$t('Home.Volume')"></van-tab>
          </van-tabs>

          <div class="list-title">
            <span>{{ $t('Home.name') }}</span>
            <span>{{ $t('Home.Latest price') }}</span>
            <span>{{ this.active == 0 ? $t('Home.Quote change') : $t('Home.Turnover') }}</span>
          </div>
          <div class="list_data">
            <div v-for="(item, index) in tickerList" :key="index" @click="tradeDetail(item)">
              <div class="data-list">
                <p>
                  <span :class="bgColor">{{ item.symbol }}</span>
                </p>
                <p :class="bgColor">{{ item.lastPrice }}</p>
                <div class="new_list_div">
                  <van-button :style="{ 'background-color': listBtnBgColor(item.rate) }">{{ active === 0 ? item.rate.toFixed(2) + '%' : (item.vol / 1000000).toFixed(2) + 'M' }}</van-button>
                </div>
              </div>
              <van-divider />
            </div>
            <van-empty v-if="tickerList == 0" :description="$t('info.info7')" />
          </div>
        </div>
      </div>
    </div>
    <v-footer></v-footer>
  </div>
</template>

<script>
export default {
  name: 'home',
  data() {
    return {
      titleName: '',
      active: 0,
      symbolType: 2,
      bannerImgList: [],
      notice: '',
      tickerList: [],
      isDayTime: false,
      loading: false,
      isApp: false
    }
  },
  computed: {
    themeClass() {
      return this.isDayTime ? '' : 'darknight'
    },
    bgColor() {
      return this.isDayTime ? 'black' : 'white'
    },
    themeClass1() {
      return this.isDayTime ? '' : 'dark_li_color'
    },
    socketMsgs() {
      return this.$websocket.getters.socketMsgs
    }
  },
  watch: {
    '$store.state.nightMode': {
      handler(newVal) {
        this.isDayTime = newVal
      },
      immediate: true
    },
    socketMsgs: function (data) {
      if (data.type == 'home' && data.data != undefined) {
        var field = this.active == 0 ? 'rate' : 'vol'
        this.tickerList = data.data.sort(function (a, b) {
          if (a[field] > b[field]) {
            return -1
          }
          if (a[field] < b[field]) {
            return 1
          }
          return 0
        })
      }
    }
  },
  activated() {
    this.getHomeMarketData()
  },
  created() {
    this.getIframe()
    this.getHomeData()
  },
  deactivated() {
    this.closeHomeMarketData()
  },
  destroyed() {
    this.closeHomeMarketData()
  },
  methods: {
    // 订阅首页行情数据
    getHomeMarketData() {
      var timer = setInterval(() => {
        if (this.$websocket.getters.getState) {
          this.$websocket.dispatch('webSocketSend', { type: 'home', symbolType: this.symbolType })
          clearInterval(timer)
        }
      }, 1)
    },
    // 取消首页行情数据
    closeHomeMarketData() {
      this.$websocket.dispatch('webSocketSend', { type: 'stop', method: 'home' })
    },
    // 获取杂项数据
    getHomeData() {
      this.$https.get('/platform/getHomeData').then(res => {
        if (res != undefined && res.code == 1) {
          this.bannerImgList = res.data['banner']
          this.notice = res.data['notice']
          this.titleName = res.data['site_name']
          localStorage.setItem('titleName', this.titleName)
          if(res.data['is_message']&&res.data['is_message']['age']&&res.data['is_message']['age']!=''){

          }else{
            // this.$router.push({
            //   path: '/message',
            // })
          }
        }
      })
    },
    // 涨跌颜色
    listBtnBgColor(rate, flag) {
      let color = ''
      if (flag || this.active === 0) {
        color = rate <= 0 ? '#EE3E57' : '#0BBA99'
      } else {
        color = '#DAAB51'
      }
      return color
    },
    // 路由跳转
    jumpRouter(router, tradeActive) {
      if (tradeActive) {
        localStorage.removeItem('symbol')
        localStorage.removeItem('symbolType')
        localStorage.setItem('tradeActive', tradeActive)
      }
      this.$router.push(router)
    },
    // 对币详情
    tradeDetail(row) {
      localStorage.setItem('symbol', row.symbol)
      localStorage.setItem('symbolType', this.symbolType)
      this.$router.push({ path: '/trade' })
    },
    // 获取当前页面是否iframe打开
    getIframe() {
      if (window.self !== window.top) {
        this.isApp = true
      } else {
        this.isApp = false
      }
    }
  }
}
</script>

<style lang="less" scoped>
@import url('./index.less');
</style>
